<template>
    <div>
        <van-nav-bar class="nav-top" title="互动通知" left-text="" right-text="清空" @click-left="returnMessage" @click-right="onClickRight()">
            <span class="search-img" slot="left">
                <img src="../../assets/image/center/icon_return.png" alt="">
            </span>
        </van-nav-bar>
        <van-row  class="nac-tab-message">
            <van-col span="8" class="text-align-c" v-for="(item,index) in tablist" :key="index">
                <span class="font-3" :class="[index == active ? 'active' : '']" @click="tabIndex(index)">
                    {{item.name}}<em class="messHint juli" v-if="item.count>0"></em>
                </span>
            </van-col>
        </van-row>
        <div class="tab-box clear-both" v-for="(item,index) in hdMessage" :key="index">
            <span class="font-2 color-9 text-align-c dispaly-block message-time">{{item.createTime}}</span>
            <div class="box1">
                <div class="message-tit">
                    <span class="title font-28 color-3 text-align-l">{{item.title}} <span class="messHint fr"  v-if="item.status==0"></span></span>
                    <div class="img-box clearfix" @click="chankan(item.url,item.type,item.id)">
                        <img class="fl" :src="$imgPath(item.sendUser.headImg)" alt="">
                        <div class="fl wz-box">
                            <span class="dispaly-block color-6 font-24" v-for="(itemEr,indexEr) in item.descriptArr" :key="indexEr">
                                <em>{{itemEr}}</em>
                                <!--<em>nana</em>-->
                            </span>
                            <!--<span class="dispaly-block color-6 font-24"><em>下单服务：</em><em>王者荣耀</em></span>-->
                            <!--<span class="dispaly-block color-6 font-24"><em>陪玩时间：</em> <em>2018-08-19 10:00-20:00(10小时)</em></span>-->
                        </div>
                    </div>
                    <span class="title font-28 color-3 text-align-l" @click="chankan(item.url,item.type,item.id)">查看{{item.title}} <van-icon class="fr" name="arrow"/></span>
                </div>
            </div>
        </div>
        <li class="hnit" v-if="isShowHnit==true">{{hnit}}</li>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
import { Toast } from 'vant';
export default {
    data(){
        return{
            active:0,
            hnit:"暂无消息",
            isShowHnit:false,
            tablist:[{
                name:'全部',
                count:0
            },{
                name:'订单',
                count:0
            },{
                name:'礼物',
                count:0
            }],
            page:0,
            size:10,
            type:'',//消息类型3：礼物消息，4订单消息
            hdMessage:[]                        
        }
    },
    created(){
        this.getMessageByUserId();
        this.getcountsystemMessage1();
        this.getcountsystemMessage2();
    },
    methods:{
        //互动消息列表展示
        getMessageByUserId(){
            let that = this;
            let url = '?page='+that.page+'&size='+that.size+'&type='+that.type+'';
            apiHttp.messageIndex.getMessageByUserId(url,'',resp=>{
                if(resp.code==200){
                    if(resp.data.content.length==0){
                        this.isShowHnit = true;
                        this.hdMessage=[];
                    }else {
                        for(var p in resp.data.content){
                            resp.data.content[p].createTime = this.$dataTime(resp.data.content[p].createTime);
                            resp.data.content[p].descriptArr = this.$points(resp.data.content[p].descript);
                            if(resp.data.content[p].sendUser.headImg==null || resp.data.content[p].sendUser.headImg==''){
                                resp.data.content[p].sendUser.headImg = '/user/head/defaultHeadImage.png';
                            }
                            that.hdMessage= resp.data.content;
                        }                       
                    }
                }else {
                    Toast(resp.message);
                }
            })
        },


        //互动消息清空
        onClickRight(){
            let that = this;
            apiHttp.messageIndex.deleteMessage('',resp=>{
                if(resp.code==200){
                    that.getMessageByUserId();
                    that.getcountsystemMessage1();
                    that.getcountsystemMessage2();
                }else{
                    Toast(resp.message);
                }
            })

        },
        //切换
        tabIndex(index){
            let that = this;
           if(index==0){
               this.isShowHnit = false;
               that.type='';
               that.getMessageByUserId();
           }else if(index==1){
               this.isShowHnit = false;
               that.type='110';//订单消息
               that.getMessageByUserId();
           }else if(index==2){
               this.isShowHnit = false;
               that.type='120';//礼物消息
               that.getMessageByUserId();
           }
            this.active = index
        },

        //查看详情
        chankan(url,type,id){          
            let that = this;
            //先执行改变当前消息状态为已读
            that.updateStatusById(id);
            if(type==120){
             //跳转到我的礼物列表页面
                this.$router.push("/gift");
            }else if(type==110){
                //跳转到我的订单详情页面
                this.$router.push({
                    name:'orderDetail',
                    params:{orderId:url},
                    query:{type:2}
                });
            } else if(type==111){
                this.$router.push({
                    name:'orderDetail',
                    params:{orderId:url},
                    query:{type:1}
                });
            }
        },
        //  //根据消息Id改变消息状态为已读
         updateStatusById(id){
             apiHttp.messageIndex.updateStatusById(id,'',resp=>{
                 if(resp.code==200){

                 }
             })
         },

        //互动消息订单未读消息数量统计
        getcountsystemMessage1(){
            let that = this;
            apiHttp.messageIndex.getcountsystemMessage(110,'',resp=>{
                if(resp.code==200&&resp.data!=null&&resp.data!=undefined){
                    that.tablist[1].count = resp.data.count; 

                }
            })
        },
        //互动消息礼物未读消息数量统计
        getcountsystemMessage2(){
            let that = this;
            apiHttp.messageIndex.getcountsystemMessage(120,'',resp=>{
                if(resp.code==200&&resp.data!=null&&resp.data!=undefined){
                that.tablist[2].count = resp.data.count;
                }
            })
        },
        //返回消息首页
        returnMessage(){
            this.$router.push({
                name:"message"
            });
        }
    }
}
</script>
<style scoped>
.nav-top{
    height: 2.2rem;
    line-height: 2.2rem;
}
.clear-both{
    clear: both;
}
.search-img{
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;   
}
.search-img>img{
    width: 1rem !important;
    position: relative;
    top: 0.2rem;
}
.nac-tab-message{
    background-color: #f5f5f5;
    height: 2rem;
    line-height: 2rem;
}
.nac-tab-message span{
    height: 1.56rem;
    line-height: 1.6rem;
    display: inline-block;
    padding: 0 .4rem;
    border-bottom: transparent .04rem solid;
}
.active{
    color: #D84F4D !important;
    border-bottom: #D84F4D .06rem solid !important;
    font-weight: 600;
}
.tab-box{
    padding: 0 .6rem;
}
.message-time{
    height: 1.6rem;
    line-height: 1.6rem;
}
.box1{
    border: solid .04rem #f5f5f5;
    padding: 0 .4rem .2rem .4rem;
}
.title{
    width: 100%;
    display: block;
    padding-top: .6rem;
    padding-bottom: .4rem;
}
.img-box{
    padding: .4rem 0;
    border-bottom:solid .04rem #f5f5f5;
    border-top:solid .04rem #f5f5f5;
}
.img-box img{
    width: 3rem;
    height: 3rem;
}
.wz-box{
    width: calc(100% - 4.2rem);
    padding-left: .6rem;
}
.wz-box span{
    line-height: .8rem;
}
/*未读消息提示*/
.messHint{
    display:inline-block;
    width: .2rem;
    height: .2rem;
    background-color:#D74D4D;
    border-radius:50%;
    position: relative;
    bottom: 0.4rem;
    left: 0.2rem;
}
.juli{
    margin-top: 0.4rem;
}
.hnit{
    text-align: center;
    color: #999999;
}
</style>


